<template>
  <view class="forum-card" v-if="forumDetail" @click="goToDetails(forumDetail.userId, forumDetail.id)">
    <!-- 头像 名字，←  → 发布时间 -->
    <view class="card-header">
      <view class="avatar">
        <img src="../../static/boy.png" v-if="forumDetail.avatar" />
        <img :src="forumDetail.userInfo.avatar" v-else>
      </view>
      <view class="name">{{ forumDetail.userName }}</view>
      <view class="time">{{ forumDetail.createTime }}</view>
    </view>
    <!-- 卡片内容 -->
    <view class="card-main">
      <text :class="{ 'content': !conmment, 'content-comment': conmment }">
        {{ forumDetail.content }}
      </text>
    </view>
    <!-- 右下角评论条数 -->
    <view class="card-footer">
      <view class="comment-inp" v-if="conmment" @click="open">
        <view class="text">分享一下你的看点吧！</view>
      </view>
      <view class="comment-icon" v-else>
        <uni-icons type="chatbubble" :color="forumDetail.messageNum ? '#0055ff' : 'darkgray'"></uni-icons>
        <text class="comment-num" :class="{ active: forumDetail.messageNum }">{{ forumDetail.messageNum }}</text>
      </view>
    </view>

    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    forumDetail: {
      type: Object,
      required: true
    },
    // 是否跳转
    jump: {
      type: Boolean,
      default: false
    },
    // 是否评论
    conmment: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F21%2F20190921150355_d2zdc.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1699877786&t=f7728ca840755f468403bc8a6a65fe81',
      formId: this.forumDetail?.id || '',

    };
  },
  methods: {
    goToDetails (userId, id) {
      if (!this.jump) return;
      uni.navigateTo({
        url: `/subpackage/forum/card-details?userId=${userId}&id=${id}`
      });
    },
    open () {
      this.$emit('open')
    }
  }
};
</script>

<style lang="scss">
.forum-card {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  box-shadow: 2rpx 2rpx 10rpx 2rpx darkgray;
  margin-bottom: 20rpx;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: -20rpx;
    left: 0;

    .avatar {
      width: 100rpx;
      height: 100rpx;

      img {
        clip-path: circle(50% at center);
        width: 100%;
        height: 100%;
      }
    }

    .name {
      margin-left: 20rpx;
      font-size: 30rpx;
      flex: 1;
      color: #0055ff;
    }

    .time {
      color: darkgray;
      font-size: 26rpx;
    }
  }

  .card-main {
    width: 90%;
    margin: 0 auto;
    font-size: 24rpx;
    margin-top: 20rpx;

    .content {
      text-indent: 16rpx;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .content-comment {
      display: block;
      text-indent: 16rpx;
    }

    .content-img {
      img {
        display: block;
        $size: 200rpx;
        height: $size;
        width: $size * 0.8;
      }
    }
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    color: darkgray;

    .comment-inp {
      margin-top: 30rpx;
      justify-self: center;
      width: 80%;
      height: 40rpx;
      line-height: 40rpx;
      background-color: lightgray;
      border-radius: 25rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      flex: 1;

      .text {
        color: #7e7e7e;
        font-size: 26rpx;
      }
    }

    .comment-icon {
      margin-left: auto;

      .comment-num {
        margin-left: 10rpx;
      }

      .active {
        color: #0055ff;
      }
    }
  }
}
</style>
